<section>
    <div class="page-header">
        <h2>Users</h2>
    </div>

    <table class="zebra-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>Email</th>
                <th width="80px">Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($users as $user) : ?>
            <tr>
                <td><?php echo $user['firstname'] . ' ' . $user['lastname']; ?></td>
                <td><?php echo $user['role_name']; ?></td>
                <td><?php echo $user['email']; ?></td>
                <td><?php echo anchor('users/edit/' . $user['user_id'], 'Edit'); ?> &nbsp; <?php echo anchor('users/delete/' . $user['user_id'], 'Delete', array('class' => 'delete')); ?></td>
            </tr>    
            <?php endforeach; ?>
        </tbody>
    </table>
    
    <?php echo $this->pagination->create_links(); ?>
    
</section>

<script>

	var search = $('<div />').addClass('pull-right');
	$('<form />').attr('action', '<?php echo site_url('users/search'); ?>')
				 .attr('method', 'post')
				 .html($('<input />').attr('type', 'text').attr('name', 'q').attr('placeholder', 'Search'))
				 .appendTo(search);
	search.appendTo($('.topbar .container-fluid'));
    
    var del = '';
    var tr  = '';
    var par = '';
    var div = '';
    
    $('table .delete').click(function() {
        
        del = $(this);
        tr  = del.parents('tr');
        par = del.parents('table');
        div = $('<div />').addClass('alert-message success');
        
        del.modal({
            modalID: 'deleteUser',
            modalHeader: 'Delete User',
            modalBody: 'Are you sure that you want to delete this user?',
            btnPrimaryText: 'Delete'
        });
        
        return false;
    });
    
    $('.modal .delete.go').live('click', function() {
        
        $.ajax({
            type		: 'post',
            url			: del.attr('href'),
            dataType	: 'json',
            success		: function(data)
            {
                if (data.success == true)
                {
                    $.modal.close();
                    tr.fadeOut(function() {
                        $(this).remove();
                        div.append($('<p />').text(data.text));
                        div.insertBefore(par).delay(3500).fadeOut(function() { $(this).remove(); });
                    });
                }
            }
        });
        
        return false;
    });
    
</script>